<template>
    <div class="container">
        <module-title title="产业集聚"></module-title>
        <div class="flex" style="height: 66px;">
            <div class="label">
                企业数：<span class="value">{{data.value1}}</span><span class="unit" style="padding:0 4px">家</span>
            </div>
            <div class="label">
                规上企业数：<span class="value">{{data.value2}}</span><span class="unit" style="padding:0 4px">家</span>
            </div>
            <div class="label">
                横店影院数：<span class="value">{{data.value3}}</span><span class="unit" style="padding:0 4px">家</span>
            </div>
        </div>
        <div class="dashDivider" style="margin-top:0px"></div>
        <div class="flex" style="padding-top:20px">
            <r-text style="flex:1;margin-left:20px" text="实际各类企业"></r-text>
            <r-text style="flex:1;margin-left:20px" text="目标发展各类企业"></r-text>
        </div>
        <div class="flex vDivider">
            <div style="flex:1;height:246px;" ref="assembleChart1"></div>
            <div style="flex:1;height:246px;" ref="assembleChart2"></div>
        </div>
    </div>
</template>
<script>
import ModuleTitle from '../ModuleTitle.vue';
import RText from '../RText.vue';
import * as echarts from 'echarts';
export default {
    components: { ModuleTitle, RText },
    props: {
        data: Object
    },
    data(){
        return {
            chart1: null,
            chart2: null
        }
    },
    watch: {
        data: {
            handler() {
                setTimeout(() => {
                    this.showChart(this.chart1, 'assembleChart1', this.getOption1());
                    this.showChart(this.chart2, 'assembleChart2', this.getOption2())
                }, 100);
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        showChart(instance, id, option) {
            if (!instance) {
                instance = echarts.init(this.$refs[id]);
            } else {
                instance.clear()
            }
            instance.setOption(option);
        },
        getOption1() {
             let angle = 0;
            let legendCommon = {
                icon: 'rect',
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#FFF',
                    fontSize: 16,
                    padding: [0, 20, 0, 0]
                }
            }
            return {
                legend: [{
                    bottom: 20,
                    width: '100%',
                    formatter: '{name} \t',
                    ...legendCommon,
                }],
                // title: {
                //     text: this.data.list1Total,
                //     top: '30%',
                //     left: '40%',
                //     textStyle: {
                //       color: '#FFF',
                //       fontSize: 20,
                //     }
                // },
                color: ['#0884FF', '#65D2FF', '#30D158', '#FFA00A'],
                tooltip: {
                  show: true,
                  trigger: 'item',
                  backgroundColor: 'rgba(3,32,64,0.80)',
                  borderColor: '#3D5267',
                  textStyle: {
                    fontSize: 14,
                    color: '#fff',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                  },
                  confine:true,
                  appendToBody: true,
                  formatter:'{b}: {c}家 {d}%'
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['40%', '53%'],
                    center: ['50%','37%'],
                    data: this.data.list1   ,
                    label: {show: false},
                    top: 0
                }, {
                    type: 'custom',
                    coordinateSystem: "none",
                    renderItem: function(params, api) {
                        return {
                            type: 'arc',
                            shape: {
                                cx: api.getWidth() / 2,
                                cy: api.getHeight() / 2.7 ,
                                r: Math.min(api.getWidth(), api.getHeight()) / 6,
                                startAngle: (0+-angle) * Math.PI / 180,
                                endAngle: (360+-angle) * Math.PI / 180
                            },
                            style: {
                                stroke:{
                                    type: 'linear',
                                    x: 1,
                                    y: 0,
                                    x2: 0,
                                    y2: 0.5,
                                    colorStops: [{
                                        offset: 1, color: '#47F6FE'
                                    },{
                                        offset: 0.2, color: 'rgba(71,139,255,0.2)'
                                    },{
                                        offset: 0, color: 'rgba(71,139,255,0)'
                                    }]
                                },
                                fill: "transparent",
                                lineWidth: 4
                            },
                            silent: true
                        };
                    },
                    data: [0]
                }, {
                     type: 'gauge',
                    startAngle: 0,
                    endAngle: 360,
                    center: ['50%', '37%'],
                    // top: '-15%',
                    radius: '80%',
                    axisLine: {show: false},
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    axisTick: {
                        splitNumber: 10,
                        lineStyle: {
                            color:'rgba(187,237,255,0.72)'
                        }
                    },
                }]
            }
        },
        getOption2() {
             let angle = 0;
            let legendCommon = {
                icon: 'rect',
                itemWidth: 8,
                itemHeight: 8,
                textStyle: {
                    color: '#FFF',
                    fontSize: 16,
                    padding: [0, 20, 0, 0]
                }
            }
            return {
                legend: [{
                    bottom: 20,
                    width: '100%',
                    formatter: '{name} \t',
                    ...legendCommon,
                }],

                color: ['#0884FF', '#65D2FF', '#30D158', '#FFA00A'],
                tooltip: {
                  show:true,
                  trigger: 'item',
                  backgroundColor: 'rgba(3,32,64,0.80)',
                  borderColor: '#3D5267',
                  textStyle: {
                    fontSize: 12,
                    color: '#fff',
                    fontStyle: 'normal',
                    fontWeight: 'normal'
                  },
                  confine:true,
                  appendToBody: true,
                  formatter:'{b}: {d}%'
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '53%',
                    center: ['50%','37%'],
                    data: this.data.list2,
                    label: {show: false},
                    top: 0
                }, {
                     type: 'gauge',
                    startAngle: 0,
                    endAngle: 360,
                    center: ['50%', '37%'],
                    // top: '-15%',
                    radius: '80%',
                    axisLine: {show: false},
                    splitLine: {show: false},
                    axisLabel: {show: false},
                    axisTick: {
                        splitNumber: 10,
                        lineStyle: {
                            color:'rgba(187,237,255,0.72)'
                        }
                    },
                }]
            }
        }
    }

}
</script>
<style lang="less" scoped>
.flex {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.vDivider {
    position: relative;
    &::before {
      position: absolute;
      content: " ";
      height: calc(100% + 10px);
      width: 1px;
      left: 50%;
      top: -30px;
      background-image: linear-gradient(to bottom, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 50%, transparent 50%);
      background-size: 1px 4px;
      background-repeat: repeat-y;
    }
  }
  .container {
    background-image: linear-gradient(180deg, rgba(8,132,255,0.00) 0%, rgba(8,132,255,0.12) 100%);
  }
</style>
